import React, { Component } from 'react';
import { Container } from '../style'
import equip1 from '@/assets/images/zhuangbei-menu1.png'
import equip2 from '@/assets/images/zhuangbei-menu-2.png'
import equip3 from '@/assets/images/zhuangbei-menu-3.png'


class main extends Component {
    render() {
        return (
          <Container>
              <ul class="clearfix">
                <li>
                  <img src={equip1} alt="" />
                  <a href="#">热销排行</a>
                </li>
                <li>
                  <img src={equip2} alt="" />
                  <a href="#">好价精选</a>
                </li>
                <li>
                  <img src={equip3} alt="" />
                  <a href="#">当季新款</a>
                </li>
               </ul>
               {/* 籃球匹克閃現 */}
             <div className="banner-area" style={{position:'relative'}}>
                <img src="http://shihuo.hupucdn.com/appZones/201701/1815/18dad2cc843300a3560cca54886957e5.png?imageView2/0/w/400/h/208/interlace/1" alt=""/>
             
                <div className="ban-txt">
                  <div className="h2">
                    <s>篮球</s>
                    "BASKETBALL"
                    <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-go_f747d60.png" alt=""/>
                  </div>
                  <div className="txt">
                    <p>匹克闪现评测</p>
                  </div>
                  <div className="left">
                    <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-1_2b1686e.png" alt=""/>
                  </div>
                  <div className="right">
                    <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-2_9a175b7.png" alt=""/>
                  </div>
                </div>
              <div className='tag-area'>
                <div className='tag-list'>
                  <a href="#">篮球鞋</a>
                  <a href="#">篮球服饰</a>
                  <a href="#">篮球配件</a>
                  <a href="#">篮球</a>
                </div>
                <div className="tag-list">
                  <a href="#">Nike</a>
                  <a href="#">adidas</a>
                  <a href="#">Jordan</a>
                  <a href="#">全部</a>
                </div>
                </div>
             {/* 户外跑鞋选购 */}
                <div className="banner-area" style={{position:'relative'}}>
                <img src="http://shihuo.hupucdn.com/appZones/201701/1815/fa1b657f6d267f5ccb6c3213ba7cebd3.png?imageView2/0/w/400/h/208/interlace/1" alt=""/>
                {/* <div className="bg-color"></div> */}
                <div className="ban-txt">
                  <div className="h2">
                    <s>跑步</s>
                    "RUNNING"
                    <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-go_f747d60.png" alt=""/>
                  </div>
                  <div className="txt">
                    <p>户外跑鞋选购</p>
                  </div>
                  <div className="left">
                    <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-1_2b1686e.png" alt=""/>
                  </div>
                  <div className="right">
                    <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-2_9a175b7.png" alt=""/>
                  </div>
                </div>
              </div>
              <div className='tag-area'>
                <div className='tag-list'>
                  <a href="#">跑步鞋</a>
                  <a href="#">跑步服饰</a>
                  <a href="#">跑步配件</a>
                  <a href="#">运动补给</a>
                </div>
                <div className="tag-list">
                  <a href="#">adidas</a>
                  <a href="#">asics</a>
                  <a href="#">Balance</a>
                  <a href="#">全部</a>
                </div>
                </div>
                 {/* 潮流打底衫 */}
                 <div className="banner-area" style={{position:'relative'}}>
                <img src="http://shihuo.hupucdn.com/appZones/201701/1815/d5bdeb4f9dee46e6cf24e239da707bc3.png?imageView2/0/w/400/h/208/interlace/1" alt=""/>
               
                <div className="ban-txt">
                  <div className="h2">
                    <s>潮流</s>
                    "CASUAL"
                    <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-go_f747d60.png" alt=""/>
                  </div>
                  <div className="txt">
                    <p>钟意 纯色圆领打底衫等8款超低价</p>
                    <p>年度鞋款回顾</p>
                  </div>
                  <div className="left">
                    <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-1_2b1686e.png" alt=""/>
                  </div>
                  <div className="right">
                    <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-2_9a175b7.png" alt=""/>
                  </div>
                </div>
              </div>
              <div className='tag-area'>
                <div className='tag-list'>
                  <a href="#">鞋类</a>
                  <a href="#">服装</a>
                  <a href="#">配件</a>
                  <a href="#">耳机</a>
                </div>
                <div className="tag-list">
                  <a href="#">Converse</a>
                  <a href="#">CASIO</a>
                  <a href="#">Vans</a>
                  <a href="#">全部</a>
                </div>
                </div>
              {/* 健身休闲裤 */}
              <div className="banner-area" style={{position:'relative'}}>
                <img src="http://shihuo.hupucdn.com/appZones/201701/1815/f08e00fd62f3e0b2561e45c9f5db0272.png?imageView2/0/w/400/h/208/interlace/1" alt=""/>
               
                <div className="ban-txt">
                  <div className="h2">
                    <s>健身</s>
                    "CASUAL"
                    <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-go_f747d60.png" alt=""/>
                  </div>
                  <div className="txt">
                    <p>热款丨Nike 男子休闲运动短裤</p>
                    <p>战斗绳狂塑</p>
                  </div>
                  <div className="left">
                    <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-1_2b1686e.png" alt=""/>
                  </div>
                  <div className="right">
                    <img src="http://sh1.hoopchina.com.cn/fis_static/shihuomobile/static/zhuangbei/index/ban-2_9a175b7.png" alt=""/>
                  </div>
                </div>
              </div>
              <div className='tag-area'>
                <div className='tag-list'>
                  <a href="#">健身装备</a>
                  <a href="#">健身用品</a>
                  <a href="#">营养补剂</a>
                  <a href="#">全部类目</a>
                </div>
             </div>

              
              

                <div className='tj-area'>
                  <div class='h2'>最新推荐</div>
                </div>
              </div>
        </Container>
        );
    }
}

export default main;
